<template>
	<view style="padding: 30rpx;">
		<button @click="onSetTimeOut()" type="primary">单次定时器setTimeOut()</button>
		<button @click="onSetTimeOut('yh',666)">启动带参定时器setTimeOut()</button>
		<button @click="onClearTimeOut()" type="primary">取消单次定时器clearTimeOut()</button>
		<button @click="onSetInterval()">启动周期定时器setInterval()</button>
		<button @click="onClearInterval()">取消周期定时器clearInterval()</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			onSetTimeOut(){
				console.log("onSetTimeOut启动计时器");
				this.timer1 = setTimeout(()=>{
					console.log("setTimeout-->延时5秒之后显示");
				},5000);
			},
			onSetTimeOut(x,y){
				console.log("onSetTimeOut启动计时器");
				this.timer1 = setTimeout(()=>{
					console.log("setTimeout-->延时5秒之后显示:"+x+","+y);
				},5000,x,y);
			},
			onClearTimeOut(){
				console.log('onClearTimeOut取消定时器:'+this.timer1);
				if(this.timer1){
					clearTimeout(this.timer1);
					console.log("clearTimeout-->取消定时器。。。。。");
					this.timer1 = null;
				}
			},
			onSetInterval(){
				console.log("onSetInterval>启动一个周期打印。。。。");
				this.timer2 = setInterval((para)=>{
					console.log('onSetInterval--'+para+'让我每秒打印一次');
				},1000,'yh')
			},
			onClearInterval(){
				console.log("onClearInterval>取消周期打印！");
				clearInterval(this.timer2);
			}
		}
	}
</script>

<style>
button{
	margin: 30rpx;
}
</style>
